<!--
 * @name order
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-02
 -->

<template>
  <div class="p-score common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
    ></page-title>
    <div class="content">
      <div class="top">
        <div class="top-left">
          <div class="left-item">
            <div class="label bg">障碍罚分</div>
            <div class="value bg">{{ scoreObj.ObstaclePunish }}</div>
          </div>
          <div class="left-item">
            <div class="label bg">时间罚分</div>
            <div class="value bg">{{ scoreObj.TimePunish }}</div>
          </div>
          <div class="left-item">
            <div class="label bg">本轮罚分</div>
            <div class="value bg">{{ scoreObj.RoundPunish }}</div>
          </div>
          <div class="left-item" v-if="scoreObj.LastRoundPunish != -1">
            <div class="label bg">上轮罚分</div>
            <div class="value bg">{{ scoreObj.LastRoundPunish }}</div>
          </div>
          <div class="left-item" v-if="scoreObj.TwoRoundsPunish != -1">
            <div class="label bg">总罚分</div>
            <div class="value bg">{{ scoreObj.TwoRoundsPunish }}</div>
          </div>
        </div>
        <div class="top-right">
          <div class="athelete">
            <div class="order common">{{ scoreInfo.Order }}</div>
            <div class="name common">{{ scoreInfo.AthleteName }}</div>
            <div class="rank common" v-show="scoreInfo.Rank">当前排名</div>
          </div>
          <div class="horse">
            <div class="order common">{{ scoreInfo.HorseOrder }}</div>
            <!-- <div class="name common">{{ scoreInfo.HorseName }}</div> -->
            <div
              :class="[scoreInfo?.HorseName?.length > 15 ? 'horseNameAdapt' : '', 'name', 'common']"
            >
              {{ scoreInfo.HorseName }}
            </div>
            <div class="rank common" :style="scoreInfo.Rank == null ? 'opacity: 0' : ''">
              {{ scoreInfo.Rank }}
            </div>
          </div>
          <div class="score-info">
            <div class="info-left">
              <div class="club">{{ scoreInfo.CountryName }}</div>
              <div class="score">{{ runTime }}</div>
            </div>
            <div class="info-right">
              <div class="allow-time" v-show="scoreInfo.AllowTime">
                允许时间：{{ scoreInfo.AllowTime }}秒
              </div>
              <div class="correction-time" v-show="scoreInfo.RedressTime">
                时间：+{{ scoreInfo.RedressTime }}秒
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-item" v-for="(item, index) in rankList" :key="index">
          <div class="rank">{{ item.Rank }}</div>
          <div class="rank-info">
            <div class="name">{{ item.AthleteName }}</div>
            <div class="horseName">{{ item.HorseName }}</div>
            <div class="club">{{ item.CountryName }}</div>
            <div class="score">({{ item.TwoRoundsPunish }} - {{ item.Time }})</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import Config from '@/assets/js/config'
import PageTitle from '@/components/scb/PageTitle.vue'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const gameInfo = ref({
  discipline: '马术',
  match: '',
  event: 'EVENTEAM',
  type: '实时成绩',
})

const scoreTypeList = reactive([
  { label: '障碍罚分', code: 'ObstaclePunish', value: '0' },
  { label: '时间罚分', code: 'TimePunish', value: '0' },
  { label: '本轮罚分', code: 'RoundPunish', value: '0' },
  { label: '上轮罚分', code: 'LastRoundPunish', value: '0' },
  { label: '两轮罚分', code: 'TwoRoundsPunish', value: '0' },
])

const scoreObj = ref({
  ObstaclePunish: 0,
  TimePunish: 0,
  RoundPunish: 0,
  LastRoundPunish: -1,
  TwoRoundsPunish: -1,
})

let timer1 = null
let timer2 = null

const runTime = ref(0)
const isRunning1 = ref(false)
const isRunning2 = ref(false)

const scoreInfo = ref({})

const rankList = ref([])

const params = ref({})
const procName = ref([])
const commonStore = useStore.useCommonStore()

onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
})

onMounted(async () => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  await getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    await fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

// 准备时间倒计时
const startTimer1 = () => {
  isRunning1.value = true
  timer1 = setInterval(() => {
    runTime.value -= 1
  }, 1000)
}

// 运行时间
const startTimer2 = () => {
  isRunning2.value = true
  timer2 = setInterval(() => {
    runTime.value += 1
  }, 1000)
}

watchEffect(() => {
  if (results.value?.datasetList?.length) {
    gameInfo.value.event = results.value.datasetList[0][0]?.EventCode
    gameInfo.value.match = results.value.datasetList[0][0]?.MatchName
    rankList.value = results.value.datasetList[1].slice(0, 3) || []
    scoreInfo.value = results.value.datasetList[0][0] || {}
    Object.keys(scoreObj.value).forEach((key) => {
      scoreObj.value[key] = results.value.datasetList[0][0][key] || -1
    })
    runTime.value = results.value.datasetList[0][0]?.Time || 0
  }
})

watch(
  () => commonStore.receivedActionMessages,
  (newVal, oldVal) => {
    if (newVal.length > 0) {
      const latestMsg = newVal[newVal.length - 1]
      console.log(latestMsg)
      const data = latestMsg?.data
      if (data?.level == 1 || data?.level == 2) {
        if (!isRunning1.value && data?.level == 1) {
          startTimer1()
        }
        if (!isRunning2.value && data?.level == 2) {
          clearInterval(timer1)
          runTime.value = 0
          startTimer2()
        }
        scoreObj.value.ObstaclePunish = data.penPoint
        scoreObj.value.TimePunish = data.penTime
        scoreObj.value.RoundPunish = data.penPoint + data.penTime
        scoreInfo.value.RedressTime = data.redressTime || 0
      } else if (data?.level == 3) {
        clearInterval(timer2)
        runTime.value = data?.runTime || 0
        getData()
      } else if (data?.level == 0) {
        runTime.value = 45
      }
    }
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/score';
</style>
